<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
  const app = Vue.createApp({
    template: `
      <div><child/></div>
    `,
    setup(){
      const {provide,ref,readonly} = Vue;
      const name = ref('dell')
      provide('name',readonly(name));
      provide('changeName',(value)=>{
         name.value = value
      })
      return {}
    }
  });
  app.component('child',{
    setup() {
      const {inject} = Vue;
      const name = inject('name');
      const changeName = inject('changeName')
      const handleClick = ()=>{
        // name.value = 'leeeee' // 修改不了
        changeName('leeeeeee')
      }
      return {name,handleClick}
    },
    template:`
      <div @click="handleClick">{{name}}</div>
    `
  })
  const vm = app.mount("#app");
</script>
</body>
</html>